import Taro, { Component } from '@tarojs/taro'
import { Button, Image, Text, View } from '@tarojs/components'
import './index.scss'
import PropTypes from 'prop-types'
import classNames from 'classnames'
import { SHARE_TYPE } from '@/config/types'
import { NAV_BAR_HEIGHT, TAB_BAR_HEIGHT } from '@/config/config'

const prefixCls = 'share-img'
const imgSize = {
  [SHARE_TYPE.USER_INFO]: { w: 400, h: 712 }
}
export default class ShareImg extends Component {
  state: any
  props: any
  width: number
  height: number

  static options = {
    addGlobalClass: true
  }

  static propTypes = {
    type: PropTypes.string,
    image: PropTypes.string,
    checked: PropTypes.bool,
    onClose: PropTypes.func,
    isOpened: PropTypes.bool,
    safeAreaInsetTop: PropTypes.bool,
    safeAreaInsetBottom: PropTypes.bool,
  }

  componentDidMount() {
    const { type } = this.props
    if (imgSize[type]) {
      this.width = imgSize[type]['w']
      this.height = imgSize[type]['h']
    }
  }

  //  查看图片
  handlePreviewImage () {
    const { image } = this.props
    Taro.previewImage({
      current: image,
      urls: [image]
    })
  }

  //  保存图片到相册
  handleSaveImage () {
    const { image } = this.props
    Taro.showLoading({ title: '保存中...' })
    Taro.downloadFile({
      url: image,
      success (res) {
        Taro.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success () {
            Taro.hideLoading()
            Taro.showToast({ title: '保存成功' })
            Taro.removeSavedFile({ filePath: res.tempFilePath })
          },
          fail (err) {
            Taro.hideLoading()
            Taro.showToast({ icon: 'none', title: err.errMsg })
          }
        })
      },
      fail () {
        Taro.hideLoading()
        Taro.showToast({ icon: 'none', title: '下载失败' })
      }
    })
  }

  render() {
    const { image, isOpened, safeAreaInsetTop, safeAreaInsetBottom, onClose } = this.props
    const bool = isOpened ? 'enter' : 'leave'
    return (
      // @ts-ignore
      <View style={{ '--tab-bar-height': `${TAB_BAR_HEIGHT}px`, '--nav-bar-height': `${NAV_BAR_HEIGHT}px` }} catchtouchmove>
        <View className={`xf-overlay xf-fade-${bool}`} onClick={() => onClose()}/>
        <View className={classNames(`xf-popup xf-popup--bottom ${prefixCls}`, {
          [`xf-slide-bottom xf-slide-${bool}`]: !isOpened,
          [`${prefixCls}__nav-bar`]: safeAreaInsetTop,
          [`${prefixCls}__tab-bar`]: safeAreaInsetBottom,
        })}>
          <View className={`${prefixCls}__box f-g-5`} onClick={() => onClose()}>
            {
              image ? (
                <Image src={image} onClick={this.handlePreviewImage.bind(this)} style={{ width: `${this.width}rpx`, height: `${this.height}rpx` }}/>
              ) : (
                <View className={`${prefixCls}__loading`}>
                  <Text className={`${prefixCls}__loading-icon bnn-icon`}>&#xe636;</Text>
                  <Text className={`${prefixCls}__loading-text`}>生成海报中</Text>
                </View>
              )
            }
          </View>
          <View className={`xf-popup xf-popup--bottom xf-popup--round ${prefixCls}__btns`}>
            <Button openType='share' className={`${prefixCls}__btn`}>
              <View className={`${prefixCls}__btn-icon bnn-icon`}>&#xe62f;</View>
              <View className={`${prefixCls}__btn-text`}>分享好友</View>
            </Button>
            <Button className={`${prefixCls}__btn`} onClick={this.handleSaveImage.bind(this)}>
              <View className={`${prefixCls}__btn-icon bnn-icon`}>&#xe60b;</View>
              <View className={`${prefixCls}__btn-text`}>保存海报</View>
            </Button>
          </View>
        </View>
      </View>
    )
  }
}
